<template>
  <div>
    <Brand
      :searchParams="searchParams"
      @removeCateName="removeName"
      @removeKey="removeKey"
      :brand="brand"
      :wrapList ="wrapList"
      :propsList ="searchParams.props"
      @removeProps ="removeSearch"
    ></Brand>
    <Selector
      :attrsList="attrsList"
      :trademarkList="trademarkList"
      @selectorList="selectorTask"

    ></Selector>
    <Details :goodsList="goodsList"></Details>
    <!-- <Footer></Footer> -->
  </div>
</template>

<script>
import Brand from './components/breand';
import Selector from './components/selector';
import Details from './components/details';
export default {
  name: 'Search',
  components: {
    Brand,
    Selector,
    Details,
  },
  data() {
    return {
      //search页面表格详情数据
      attrsList: [],
      //商品列表数据
      goodsList: [],
      //search页面的品牌数据
      trademarkList: [],
      searchParams: {
        category1Id: undefined,
        category2Id: undefined,
        category3Id: undefined,
        categoryName: undefined,
        keyword: undefined,
        props: [],
        trademark: undefined,
        order: undefined,
        pageNo: 1,
        pageSize: 10,
      },
      brand: '',
      //面包屑路径拼接数组
      wrapList:[]
    };
  },
  methods: {
       //因为每次参数一变化，就要发送请求获取数据，可以封装发送请求函数，监听参数变化
    async reqSearch(val) {
      const searchList = await this.$API.search.reqList(val);
      // console.log(searchList);
      this.attrsList = searchList.attrsList;
      this.goodsList = searchList.goodsList;
      this.trademarkList = searchList.trademarkList;
    },
    removeName() {
      // this.searchParams.categoryName = undefined;
    },
    removeKey() {
      // console.log(2222);
      this.searchParams.keyword = undefined;
    },
    //selector子组件给父组件传递数据，用于拼接参数，发送请求获取数据
    selectorTask(wrap, attrValue) {
      // console.log(wrap, attrValue);
      //参数拼接模板["属性Id:属性值：属性名"]
      const addParams = `${wrap.attrId}:${attrValue}:${wrap.attrName}`;
      //第一种，面包屑路径拼接，data中存变量去接收，还是要实现数组去重
      //  const result= `${addParams.split(':')[2]}:${addParams.split(':')[1]}`
      // //数组去重
      // if(this.wrapList.includes(result)){
      //   return 
      // }else{
      //       this.wrapList.push(result)
      // }
        //  console.log( this.wrapList);
    
      //console.log(addParams);  //  23:6G:运行内存
      //判断数组是否有包含这项，没有就添加，实现去重
      if (this.searchParams.props.includes(addParams)) {
        return;
      } else {
        this.searchParams.props.push(addParams);
      }
    },
    //删除查询的数据详情
    removeSearch(valIndex){
        //遍历数组，过滤掉相同的索引
      const result=  this.searchParams.props.filter((item,index)=>{
              return index !== valIndex
        })
        this.searchParams.props = result
    }

 

    //挂载阶段数据更新一次，在本页面刷新跳转数据不发生改变
    // async mounted() {
    //   // console.log(this.$API);
    //   //search页面挂载的时候获取数据

    //   this.searchParams = { ...this.$route.query };
    //   // console.log(this.searchParams);
    //   const searchList = await this.$API.search.reqList(this.searchParams);

    //   this.attrsList = searchList.attrsList;
    //   this.goodsList = searchList.goodsList;
    //   this.trademarkList = searchList.trademarkList;
    // },

    //mounted挂载只能监听一次，用watch能时刻监听
  },
  watch: {
    '$route.query': {
      //一挂载就立即监听
      immediate: true,
      async handler(newQuery) {
        // console.log(1111);
        // console.log(newQuery);
        //第一种方法  让新值覆盖原始的值，套三层主要是因为要categroy有三个，url路径只能有一个
        Object.assign(
          this.searchParams,
          {
            category1Id: undefined,
            category2Id: undefined,
            category3Id: undefined,
            categoryName: undefined,
            keyword: undefined,
            //商标属性的数组
            props: [],
            //品牌名称
            trademark: undefined,
            //排序方式
            order: undefined,
            pageNo: 1,
            pageSize: 10,
          },
          newQuery
        );

        //第二种 直接通过传递的覆盖
        // this.searchParams = {
        //   ...this.searchParams,
        //   ...newQuery,
        // };
        // console.log('aaa',this.searchParams);
        //发送请求获取数据
        // const searchList = await this.$API.search.reqList(this.searchParams);
        // // console.log(searchList);
        // this.attrsList = searchList.attrsList;
        // this.goodsList = searchList.goodsList;
        // this.trademarkList = searchList.trademarkList;

        //这里就不用发送请求，因为监听了参数变化
        //  this. reqSearch(this.searchParams)
      },
    },
    //监听发送请求参数变化
    searchParams: {
      //开启立即监听
      immediate: true,
      //深度监听
      deep: true,
      //每次参数发生改变，就发送请求
      async handler(value) {
        this.reqSearch(value);
      },
    },
  },

  async mounted() {
    //获取品牌数据
    this.$bus.$on('trademark', (item) => {
      const { tmId, tmName } = item;
      this.brand = tmName;
      const trademarkName = `${tmId}:${tmName}`;
      // console.log(trademarkName); "1:海信"
      this.searchParams.trademark = trademarkName;
    });
  },
};
</script>

<style lang="less" scoped></style>
